<template>
	<view class="tsi0-container">
		<view class="flex align-center head">
			<view class="name">名称</view>
			<view class="price">持仓 | 市值</view>
			<view class="price">现价 | 成本</view>
			<view class="up-down">盈亏 | 涨幅</view>
		</view>
		<view class="content">
			<mescroll-uni
				:height="`${height - 72 - 76}rpx`"
				:down="downOption"
				:up="upOption"
				@init="mescrollInit"
				@down="downCallback"
				@up="upCallback"
			>
				<!-- 数据列表 -->
				<view class="list">
					<view
						v-for="(item,index) in list"
						:key="index"
						@click="toDetail(item)"
						class="flex align-center border-bottom"
					>
						<view class="name" @click.stop="toStock(item)">
							<view>{{item.title}}</view>
							<view class="flex align-center margin-top-xs">
								<image class="tag" :src="`/static/images/icons/${item.marketCode}.png`" mode=""></image>
								<text class="text-sm">{{item.code}}</text>
							</view>
						</view>
						<view class="price">
							<view>{{item.number}}</view>
							<view class="margin-top-xs">{{item.cityValue}}</view>
						</view>
						<view class="price">
							<view>{{item.cai_buy}}</view>
							<view class="margin-top-xs">{{item.buyprice}}</view>
						</view>
						<view class="up-down" :class="item.profitLose>0?'text-red':'text-green'">
							<view>{{item.profitLose}}</view>
							<view class="text-sm margin-top-xs">{{item.profitLose_rate}}</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script setup>
import {ref, onBeforeMount} from 'vue';
import {onPageScroll, onReachBottom} from '@dcloudio/uni-app';
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";

const {mescrollInit, downCallback, getMescroll} = useMescroll(onPageScroll, onReachBottom);

// api
import {holdStock} from "@/api/user.js";

// utils
import {getMarketCode} from '@/utils/stock.js';

// props
const props = defineProps({
	height: {
		type: String,
		default: ''
	}
});

onBeforeMount(() => {
	getListFn();
});

// mescroll-body 配置（down && up）
const downOption = {
	auto: false
};
const upOption = {
	auto: false,
	empty: {
		use : true,
		icon: '/static/images/wushuju.png',
		tip: '~ 空空如也 ~'
	}
};

const getListFn = () => {
	setTimeout(function() {
		getMescroll().resetUpScroll();
	}, 0);
};

// 列表数据
const list = ref([]);

const upCallback = (mescroll) => {
	holdStock({
		status: 1,
		buytype: 1,
		page: mescroll.num,
		size: mescroll.size
	}).then(res => {
		if(res.code==1){
			if(mescroll.num == 1) list.value = [];
			res.data.list.forEach(v=>{
				v.marketCode = getMarketCode(v.allcode)
			})
			list.value = list.value.concat(res.data.list);
			mescroll.endSuccess(res.data.list.length);
		} else {
			mescroll.endErr();
		}
	});
};

const toDetail = (item) => {
	uni.navigateTo({
		url:`/pages/shares/holdDetail?data=${JSON.stringify(item)}`
	})
};
const toStock = (item) => {
	uni.navigateTo({
		url:`/pages/shares/detail?code=${item.allcode}`
	})
};

defineExpose({getListFn});
</script>

<style lang='scss' scoped>
.tsi0-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 38rpx 30rpx;
	box-sizing: border-box;
	
	.head {
		position: sticky;
		top: 0;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #E2E2E2;
		background: #fff;
		z-index: 99;
	}
	
	.name, .price, .up-down {
		padding: 16rpx;
		font-size: 26rpx;
		box-sizing: border-box;
	}
	
	.name{
		width: 25%;
	}
	
	.price{
		width: 25%;
		text-align: center;
	}
	
	.up-down{
		width: 25%;
		text-align: right;
	}
	
	.tag{
		width: 36rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}

	::v-deep(.content) {
		flex: 1;
		
		.empty-icon {
			width: 220rpx;
		}
	}
}
</style>